<template>
  <header class="fixed top-0 left-0 w-full z-40 bg-gradient-to-r from-blue-900/80 to-blue-800/60 backdrop-blur-md shadow-lg border-b border-blue-400/20 h-20 flex items-center px-8">
    <!-- LOGO & 系统名 -->
    <div class="flex items-center mr-8">
      <div class="w-10 h-10 rounded-full bg-blue-800 flex items-center justify-center shadow-lg mr-2">
        <i class="fas fa-globe text-2xl text-white"></i>
      </div>
      <span class="text-xl font-bold tracking-wide select-none" style="font-family: inherit;">
        <span class="bg-gradient-to-r from-blue-400 to-blue-700 bg-clip-text text-transparent">BBB</span><span class="bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">Map</span>
      </span>
    </div>
    <!-- 菜单 -->
    <nav class="flex-1 flex items-center justify-end space-x-2 relative">
      <div class="hidden md:flex items-center space-x-2">
        <button v-for="item in menu" :key="item.label"
          :class="['flex flex-col items-center justify-center px-4 py-1.5 rounded-lg font-medium text-white transition-all duration-200 w-[88px]',
            isActive(item) ? 'bg-blue-900/80 border-b-4 border-cyan-400 shadow-lg' : 'bg-blue-800/60 hover:bg-blue-700/80']"
          @click="handleMenuClick(item)">
          <i :class="item.icon + ' mb-1'" style="font-size: 1.3rem;"></i>
          <span style="font-size: 0.75rem;">{{ item.label }}</span>
        </button>
      </div>
      <!-- 移动端/窄屏下拉菜单 -->
      <div class="md:hidden relative">
        <button @click="showDropdown = !showDropdown" class="flex items-center px-3 py-1.5 rounded-lg bg-blue-800/60 text-white">
          <i class="fas fa-bars text-lg"></i>
        </button>
        <div v-if="showDropdown" class="absolute right-0 mt-2 w-40 bg-blue-900/95 rounded-lg shadow-lg z-50">
          <button v-for="item in menu" :key="item.label"
            :class="['w-full flex flex-col items-center px-4 py-2 text-base text-white hover:bg-blue-700/80', isActive(item) ? 'bg-blue-900/80 border-l-4 border-cyan-400' : '']"
            @click="handleMenuClick(item); showDropdown = false">
            <i :class="item.icon + ' mb-1'" style="font-size: 1.4rem;"></i>
            <span style="font-size: 0.92rem;">{{ item.label }}</span>
          </button>
        </div>
      </div>
    </nav>
    <!-- 当前日期和时间 -->
    <div class="ml-6 text-white flex flex-col items-center justify-center" style="min-width: 120px;">
      <span class="block text-xs font-bold tracking-wide text-center">
        <i class="fas fa-calendar-alt mr-1 text-base"></i>{{ currentDate }}
      </span>
      <span class="block text-base font-bold tracking-wider text-center">
        <i class="fas fa-clock mr-1"></i>{{ currentClock }}
      </span>
    </div>
    <!-- 右侧通知和用户 -->
    <div class="flex items-center space-x-4 ml-6 relative">
      <!-- 通知 -->
      <div class="relative">
        <button class="w-10 h-10 flex items-center justify-center rounded-full bg-blue-900/70 hover:bg-blue-700/80 shadow-lg transition-all ring-2 ring-cyan-400/40 focus:ring-4 focus:ring-cyan-300/60" @click="showNotice = !showNotice; showUserMenu = false">
          <i class="fas fa-bell text-lg text-white animate-pulse"></i>
          <span v-if="unreadCount() > 0" class="absolute top-1.5 right-1.5 bg-red-500 text-white text-xs font-bold rounded-full px-1.5 py-0.5 border-2 border-blue-900 animate-bounce">{{ unreadCount() }}</span>
        </button>
        <!-- 通知下拉 -->
        <div v-if="showNotice" class="absolute right-0 mt-5 w-80 bg-blue-900/95 rounded-xl shadow-2xl z-50 border border-cyan-400/30 animate-fade-in">
          <div class="flex items-center justify-between px-4 pt-3 pb-1 border-b border-cyan-400/20">
            <div class="flex space-x-2">
              <button v-for="type in noticeTypes" :key="type" @click="activeNoticeTab = type" :class="['px-3 py-1 rounded-lg text-sm font-semibold', activeNoticeTab === type ? 'bg-cyan-500/80 text-white' : 'text-cyan-200 hover:bg-cyan-400/20']">{{ type }}</button>
            </div>
            <button class="text-xs text-cyan-300 hover:underline" @click="markAllRead">全部已读</button>
          </div>
          <div class="max-h-64 overflow-y-auto divide-y divide-cyan-400/10">
            <div v-for="n in notices.filter(n => n.type === activeNoticeTab)" :key="n.id" class="px-4 py-3 flex items-start space-x-3 hover:bg-blue-800/60 transition-all text-xs">
              <div :class="['w-2 h-2 rounded-full mt-2', n.read ? 'bg-cyan-300/30' : 'bg-cyan-400 animate-pulse']"></div>
              <div class="flex-1">
                <div class="font-bold text-cyan-100 text-xs">{{ n.title }}</div>
                <div class="text-xs text-cyan-200 mb-1">{{ n.content }}</div>
                <div class="text-xs text-cyan-400/80">{{ n.time }}</div>
              </div>
            </div>
            <div v-if="notices.filter(n => n.type === activeNoticeTab).length === 0" class="text-center text-cyan-300 py-6 text-xs">暂无通知</div>
          </div>
        </div>
      </div>
      <!-- 用户 -->
      <div class="relative">
        <button class="w-10 h-10 rounded-full bg-blue-800 flex items-center justify-center shadow-lg border-2 border-cyan-400/60 hover:ring-2 hover:ring-cyan-300/60 transition-all" @click="showUserMenu = !showUserMenu; showNotice = false">
          <i class="fas fa-user text-lg text-cyan-200"></i>
        </button>
        <!-- 用户菜单 -->
        <div v-if="showUserMenu" class="absolute right-0 mt-5 w-44 bg-blue-900/95 rounded-xl shadow-2xl z-50 border border-cyan-400/30 animate-fade-in">
          <button class="w-full flex items-center px-4 py-3 text-base text-cyan-100 hover:bg-blue-700/80 transition-all" @click="handleUserMenu('profile')">
            <i class="fas fa-id-card mr-2"></i> 详情
          </button>
          <button class="w-full flex items-center px-4 py-3 text-base text-cyan-100 hover:bg-blue-700/80 transition-all" @click="handleUserMenu('password')">
            <i class="fas fa-key mr-2"></i> 修改密码
          </button>
          <button class="w-full flex items-center px-4 py-3 text-base text-cyan-100 hover:bg-blue-700/80 transition-all" @click="handleUserMenu('home')">
            <i class="fas fa-home mr-2"></i> 主页
          </button>
          <button class="w-full flex items-center px-4 py-3 text-base text-red-300 hover:bg-red-500/80 hover:text-white transition-all border-t border-cyan-400/20" @click="handleUserMenu('logout')">
            <i class="fas fa-sign-out-alt mr-2"></i> 退出系统
          </button>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted, onUnmounted } from 'vue'
const router = useRouter()
const route = useRoute()
const showDropdown = ref(false)
const showNotice = ref(false)
const showUserMenu = ref(false)
const menu = [
  { icon: 'fas fa-home', label: '首页', path: '/map' },
  { icon: 'fas fa-chart-bar', label: '数据大屏', path: '/datascreen' },
  { icon: 'fas fa-database', label: '数据管理', path: '/data' },
  { icon: 'fas fa-mobile-alt', label: '移动采集', path: '/mobile' },
  { icon: 'fas fa-balance-scale', label: '行业法规', path: '/law' },
  { icon: 'fas fa-cog', label: '系统管理', path: '/system' },
  { icon: 'fas fa-desktop', label: '系统监控', path: '/monitor' },
  { icon: 'fas fa-info-circle', label: '关于', path: '/about' },
]
const handleMenuClick = (item) => {
  if (item.path && route.path !== item.path) router.push(item.path)
}
const isActive = (item) => {
  return item.path === route.path
}

// 通知数据
const notices = ref([
  { id: 1, type: '系统', title: '系统升级维护', content: '系统将于今晚23:00维护', time: '1小时前', read: false },
  { id: 2, type: '业务', title: '新数据已同步', content: '2024年数据已导入', time: '2小时前', read: false },
  { id: 3, type: '其他', title: '欢迎使用BBBMap', content: '感谢您的支持', time: '1天前', read: true },
])
const noticeTypes = ['系统', '业务', '其他']
const activeNoticeTab = ref('系统')
const unreadCount = () => notices.value.filter(n => !n.read).length
function markAllRead() {
  notices.value.forEach(n => n.read = true)
}

// 用户菜单
function handleUserMenu(action) {
  showUserMenu.value = false
  if (action === 'logout') {
    router.push('/login')
  } else if (action === 'home') {
    router.push('/map')
  } else if (action === 'profile') {
    // 跳转到用户详情页（可自定义）
    router.push('/profile')
  } else if (action === 'password') {
    // 跳转到修改密码页（可自定义）
    router.push('/password')
  }
}

const currentDate = ref('')
const currentClock = ref('')
function updateTime() {
  const now = new Date()
  const y = now.getFullYear()
  const m = String(now.getMonth() + 1).padStart(2, '0')
  const d = String(now.getDate()).padStart(2, '0')
  const h = String(now.getHours()).padStart(2, '0')
  const min = String(now.getMinutes()).padStart(2, '0')
  const s = String(now.getSeconds()).padStart(2, '0')
  currentDate.value = `${y}-${m}-${d}`
  currentClock.value = `${h}:${min}:${s}`
}
let timer = null
onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
header {
  min-width: 1200px;
}
nav button {
  position: relative;
}
@media (max-width: 900px) {
  header { min-width: 0; }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fade-in 0.25s cubic-bezier(0.4,0,0.2,1);
}
</style> 